<span class="upload-image">
    <script defer src="/js/jquery/blueimp/js/vendor/jquery.ui.widget.js"></script>
    <script defer src="/js/jquery/blueimp/js/load-image.min.js"></script>
    <script defer src="/js/jquery/blueimp/js/canvas-to-blob.min.js"></script>
    <script defer src="/js/jquery/blueimp/js/jquery.iframe-transport.js"></script>
    <script defer src="/js/jquery/blueimp/js/jquery.fileupload.js"></script>
    <script defer src="/js/jquery/blueimp/js/jquery.fileupload-process.js"></script>
    <script defer src="/js/jquery/blueimp/js/jquery.fileupload-image.js"></script>

    <link rel="stylesheet" type="text/css" href="/js/jquery/blueimp/css/jquery.fileupload.css" />

    <script type="text/javascript">
        $(function(){
            $('#fileupload').fileupload({
                url: '/general/up/',
                dataType: 'json',
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
	            disableImageMetaDataSave: true,
                disableImageResize: false,
                imageMaxWidth: 1920,
                imageMaxHeight: 1920,
                imageCrop: false,

	            formData: function(form) {
		            var data = [{
			            'name': 'target_type',
			            'value': $('#up_target_type').val()
		            }];

		            if($('#up_resize_to').length && $('#up_resize_to').val() > 0)
		            {
			            data[1] = {
				            'name': 'disable_resize',
				            'value': '1'
			            };
		            }

		            return data;
	            },

	            done: function (e, data) {
//	                AjaxLoader.hide();

                    window.setTimeout(function(){
                        $('.upload-image .photos .photo label input.main-photo').off('change');
                        $('.upload-image .photos .photo label input').on('change', up_mainPhoto);

                        $('.upload-image .photos .photo .sizes a').off('click');
                        $('.upload-image .photos .photo .sizes a').on('click', up_sizes);

                        $('.upload-image .photos .photo > a').on('click', up_deletePhoto);

                    }, 100);

                    var obj = $('.upload-image .photo.template').clone(true);

                    obj.find('> a').attr('href', obj.find('> a').attr('href') +'/id/'+ data.result.id);
                    obj.find('a.img').attr('href', data.result.path + data.result.file).addClass('fancy');
                    obj.find('a img').attr('src', data.result.path + data.result.file);
                    obj.find('a img').attr('alt', data.result.file);
                    obj.find('a img').attr('title', data.result.file);
	                obj.find('a img').show();
                    obj.find('.wrapper span').text(data.result.file);
                    obj.find('input[name="photos[]"]').val(data.result.id);
                    obj.find('input').removeAttr('disabled');

                    var sizeBox = obj.find('span.sizes');

                    for(var i in data.result.photos)
                    {
                        sizeBox.append($('<a href="'+ data.result.photos[i].file +'">'+ (data.result.photos[i].width + 'x'+ data.result.photos[i].height) +'</a>'))
                    }

                    obj.appendTo('.upload-image span.photos');
                    obj.removeClass('template');
                }
            }).bind('fileuploadstart', function () {
		            AjaxLoader.show($('span.upload-image'));
	            }).bind('fileuploadadd', function (e, data) {
		            data.imageMaxWidth = 1920;
		            data.imageMaxHeight = 1920;

		            if($('#up_resize_to').length && $('#up_resize_to').val() > 0)
		            {
			            data.imageMaxWidth = $('#up_resize_to').val();
			            data.imageMaxHeight = $('#up_resize_to').val();
		            }
	            });

            function up_sizes(e){
                e.preventDefault();
                prompt('Скопируйте выделеный текст', $(this).attr('href'));
            };

            function up_mainPhoto(){
                var id = $(this).parents('.photo').find('input[name="photos[]"]').val();
                $(this).val(id);
            };

            function up_deletePhoto(e){
                e.preventDefault();

                var item = $(this).parent();

                $.post($(this).attr('href'), {}, function(response){
                    if(response && response.success)
                        item.remove();
                }, 'json');
            };

            $('.upload-image .photos .photo .sizes a').on('click', up_sizes);
            $('.upload-image .photos .photo label input').on('change', up_mainPhoto);
            $('.upload-image .photos .photo > a').on('click', up_deletePhoto);
        });
    </script>

    <style>

    </style>

    <span class="photo template">
        <a href="<?php echo Yii::app()->controller->createUrl('/general/deletePhoto/'); ?>"></a>
        <span class="wrapper">
            <a class="img" rel="g1" href=""><img alt="" src="" /><span>Name</span></a>
        </span>
        <span class="sizes"></span>
        <label><input type="radio" class="main-photo" name="main_photo" value="" disabled /> Главная</label>
        <div><input type="text" name="photos_title[]" value="" disabled placeholder="Заголовок" /></div>
        <input type="hidden" name="photos[]" value="" disabled />
    </span>


	<span class="fields">
		<input id="up_resize_to" type="text" value="" placeholder="Ширина" />
	</span>
    <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Выбрать</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload" type="file" name="files[]"  multiple accept="image/*">
	    <input id="up_target_type" type="hidden" name="target_type" value="<?php echo $oRow->getTableName(); ?>" />
    </span>

    <span class="photos"><?php

        if(!empty($oRow) && !empty($oRow['photos']))
        {
            foreach($oRow['photos'] as $oPhoto)
            {
        ?>
        <span class="photo">
            <a href="<?php echo Yii::app()->controller->createUrl('/general/deletePhoto/', array('id' => $oPhoto->id)); ?>"></a>
            <span class="wrapper">
                <a class="fancy" rel="g1" href="<?php echo $oPhoto->path . $oPhoto->file; ?>"><img title="<?php echo $oPhoto->file; ?>" alt="<?php echo $oPhoto->file; ?>" src="<?php echo $oPhoto->path .'list-'. $oPhoto->file; ?>" /><span><?php echo $oPhoto->file; ?></span></a>
            </span>
	        <?php if(!empty(Yii::app()->params->photos[$oRow->getTableName()])): ?>
            <span class="sizes">
	            <?php
	            foreach(Yii::app()->params->photos[$oRow->getTableName()] as $key => $size):
				if(is_file(PUBLIC_PATH.''.$oPhoto->path .($key !== '-' ? $key .'-' : ''). $oPhoto->file))
				{
		            $sizes = getimagesize(PUBLIC_PATH.''.$oPhoto->path .($key !== '-' ? $key .'-' : ''). $oPhoto->file);
		            if(!empty($sizes[0]) && !empty($sizes[1]))
		            {
	            ?>
		            <a href="<?php echo $oPhoto->path .($key !== '-' ? $key .'-' : ''). $oPhoto->file; ?>"><?php echo $sizes[0] .'/'. $sizes[1]; ?></a>
	            <?php
		            }
				}
	            endforeach;
	            ?>
            </span>
            <?php endif; ?>
            <label><input type="radio" class="main-photo" name="main_photo" <?php echo $oPhoto->is_main ? ' checked' : ''; ?> value="<?php echo $oPhoto->id; ?>" /> Главная</label>
	        <div><input type="text" name="photos_title[]" value="<?php echo $oPhoto->title; ?>" placeholder="Заголовок" /></div>
            <input type="hidden" name="photos[]" value="<?php echo $oPhoto->id; ?>" />
        </span>
        <?php
            }
        }

    ?></span>
</span>